import { connect } from "dva";
import styles from "./index.less";
import { InputItem, Button, WingBlank, Toast } from "antd-mobile";
import labelFilter from "../../assets/label-filter@3x.png";
import labelClear from "../../assets/searchbar_clear@3x.png";
import searchFilter from "../../assets/searchbar_search.png";
import customerImg1 from "../../assets/customerImg1.jpg";
import customerImg2 from "../../assets/customerImg2.jpg";
import customerImg3 from "../../assets/customerImg3.jpg";
import customerImg4 from "../../assets/customerImg4.jpg";

function App({ myCustomer, dispatch }) {
  const { openDrawer } = myCustomer;
  function onOpen() {
    dispatch({
      type: "myCustomer/onOpenDrawer",
      payload: {
        openDrawer: true
      }
    });
  }
  function closeDrawer() {
    dispatch({
      type: "myCustomer/onOpenDrawer",
      payload: {
        openDrawer: false
      }
    });
  }
  const delTag = () => {
    Toast.success("删除成功");
  };
  const sidebar = () => (
    <div className={styles.drawer} onClick={e => e.stopPropagation()}>
      <div className={styles.tagFilter}>
        <div className={styles.filterContent}>
          <div className={styles.filterTip}>
            <span className={styles.title}>标签筛选</span>
            <div className={styles.searchModule}>
              <span>
                <img src={searchFilter} className={styles.searchFilter} />
              </span>
              <input className={styles.input} placeholder="搜索标签" />
            </div>
            <div className={styles.tagClass}>
              <span className={styles.orangeTag + " " + styles.imgFork}>
                全部标签
              </span>
              <span className={styles.defaultTag}>热门标签</span>
            </div>
          </div>
          <div className={styles.border}> </div>
          <div className={styles.tagContent}>
            <div className={styles.tagRow}>
              <span className={styles.orangeTag}>流量需求高</span>
              <span className={styles.defaultTag}>IT男</span>
              <span className={styles.defaultTag}>高消费用户</span>
            </div>
            <div className={styles.tagRow}>
              <span className={styles.defaultTag}>语音需求高</span>
              <span className={styles.defaultTag}>流量需求高</span>
              <span className={styles.defaultTag}>热门标签</span>
            </div>
            <div className={styles.tagRow}>
              <span className={styles.orangeTag}>热门标签</span>
              <span className={styles.defaultTag}>热门标签</span>
              <span className={styles.defaultTag}>热门标签</span>
            </div>
            <div className={styles.tagRow}>
              <span className={styles.orangeTag}>热门标签</span>
              <span className={styles.defaultTag}>热门标签</span>
              <span className={styles.defaultTag}>热门标签</span>
            </div>
            <div className={styles.tagRow}>
              <span className={styles.orangeTag}>流量需求高</span>
              <span className={styles.defaultTag}>流量需求高</span>
              <span className={styles.defaultTag}>流量需求高</span>
            </div>
            <div className={styles.tagRow}>
              <span className={styles.orangeTag}>语音需求高</span>
              <span className={styles.defaultTag}>流量需求高</span>
              <span className={styles.defaultTag}>热门标签</span>
            </div>
          </div>
        </div>
        <div className={styles.filterFooter}>
          <div className={styles.reset}>
            <span className={styles.submitText}>重置</span>
          </div>
          <div className={styles.confirm}>
            <span className={styles.submitText}>确定</span>
          </div>
        </div>
      </div>
    </div>
  );
  return (
    <div>
      {openDrawer && (
        <div className={styles.drawerplan} onClick={closeDrawer}>
          {sidebar()}
        </div>
      )}
      <div>
        <div className={styles.tip}>
          <div className={styles.border}> </div>
          <div className={styles.infoItem}>
            <span className={styles.textProp}>客户姓名</span>
            <div>
              <InputItem clear placeholder="请输入姓名" />
            </div>
          </div>
          <div className={styles.border}> </div>
          <div className={styles.infoItem}>
            <span className={styles.textProp}>客户电话</span>
            <InputItem clear placeholder="请输入电话号码" />
          </div>
          <div className={styles.border}> </div>
          <div className={styles.infoItem}>
            <span className={styles.tagSelect}>标签选择</span>
            <span className={styles.tag}>
              流量需求高/高消费用户/IT男/语音通话需求…
            </span>
            <img
              src={labelFilter}
              className={styles.labelFilter}
              onClick={onOpen}
            />
          </div>
          <div className={styles.border}> </div>
          <WingBlank size="lg">
            <Button className={styles.inquire}>查询</Button>
          </WingBlank>
        </div>
        <div className={styles.recordNum}>
          <span>共4个记录</span>
        </div>
        <div className={styles.recordList} onClick={delTag}>
          <div className={styles.recordModule}>
            <img className={styles.customerImg} src={customerImg1} />
            <div className={styles.detailRight}>
              <div className={styles.infoModule}>
                <span className={styles.customerInfo}>张三</span>
                <span className={styles.customerInfo}>18988110230</span>
                <img src={labelFilter} className={styles.labelFilter} />
              </div>
              <div className={styles.labelItem}>
                <div className={styles.labelRow}>
                  <div className={styles.label}>
                    <span>语音需求高</span>
                    <img src={labelClear} className={styles.labelClear} />
                  </div>
                  <div className={styles.label}>
                    <span>流量需求高</span>
                    <img src={labelClear} className={styles.labelClear} />
                  </div>
                </div>
                <div className={styles.labelRow}>
                  <div className={styles.label}>
                    <span>高消费能力</span>
                    <img src={labelClear} className={styles.labelClear} />
                  </div>
                  <div className={styles.label}>
                    <span>IT男</span>
                    <img src={labelClear} className={styles.labelClear} />
                  </div>
                  <div>
                    <span />
                    <span />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.recordModule}>
            <img className={styles.customerImg} src={customerImg2} />
            <div className={styles.detailRight}>
              <div className={styles.infoModule}>
                <span className={styles.customerInfo}>李四</span>
                <span className={styles.customerInfo}>18988110230</span>
                <img src={labelFilter} className={styles.labelFilter} />
              </div>
              <div className={styles.labelItem}>
                <div className={styles.labelRow}>
                  <div className={styles.label}>
                    <span>语音需求高</span>
                    <img src={labelClear} className={styles.labelClear} />
                  </div>
                  <div className={styles.label}>
                    <span>流量需求高</span>
                    <img src={labelClear} className={styles.labelClear} />
                  </div>
                </div>
                <div className={styles.labelRow}>
                  <div className={styles.label}>
                    <span>高消费能力</span>
                    <img src={labelClear} className={styles.labelClear} />
                  </div>
                  <div className={styles.label}>
                    <span>IT男</span>
                    <img src={labelClear} className={styles.labelClear} />
                  </div>
                  <div>
                    <span />
                    <span />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.recordModule}>
            <img className={styles.customerImg} src={customerImg3} />
            <div className={styles.detailRight}>
              <div className={styles.infoModule}>
                <span className={styles.customerInfo}>李四</span>
                <span className={styles.customerInfo}>18988110230</span>
                <img src={labelFilter} className={styles.labelFilter} />
              </div>
              <div className={styles.labelItem}>
                <div className={styles.labelRow}>
                  <div className={styles.label}>
                    <span>语音需求高</span>
                    <img src={labelClear} className={styles.labelClear} />
                  </div>
                  <div className={styles.label}>
                    <span>流量需求高</span>
                    <img src={labelClear} className={styles.labelClear} />
                  </div>
                </div>
                <div className={styles.labelRow}>
                  <div className={styles.label}>
                    <span>高消费能力</span>
                    <img src={labelClear} className={styles.labelClear} />
                  </div>
                  <div className={styles.label}>
                    <span>IT男</span>
                    <img src={labelClear} className={styles.labelClear} />
                  </div>
                  <div>
                    <span />
                    <span />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.recordModule}>
            <img className={styles.customerImg} src={customerImg4} />
            <div className={styles.detailRight}>
              <div className={styles.infoModule}>
                <span className={styles.customerInfo}>张三</span>
                <span className={styles.customerInfo}>18988110230</span>
                <img src={labelFilter} className={styles.labelFilter} />
              </div>
              <div className={styles.labelItem}>
                <div className={styles.labelRow}>
                  <div className={styles.label}>
                    <span>语音需求高</span>
                    <img src={labelClear} className={styles.labelClear} />
                  </div>
                  <div className={styles.label}>
                    <span>流量需求高</span>
                    <img src={labelClear} className={styles.labelClear} />
                  </div>
                </div>
                <div className={styles.labelRow}>
                  <div className={styles.label}>
                    <span>高消费能力</span>
                    <img src={labelClear} className={styles.labelClear} />
                  </div>
                  <div className={styles.label}>
                    <span>IT男</span>
                    <img src={labelClear} className={styles.labelClear} />
                  </div>
                  <div>
                    <span />
                    <span />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
export default connect(({ myCustomer }) => ({ myCustomer }))(App);
